<template>
    <div class="detail">
        <!-- 返回按钮 -->
        <back></back>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item,index in pics" :key="index">
                <img :src="item" alt="">
            </van-swipe-item>
            
        </van-swipe>
        <!-- 基本信息 -->
        <div class="basicInfo">
            <h4>{{basicInfo.name}}</h4>
            <p>{{basicInfo.characteristic}}</p>
            <div>
                <span class="red">低价￥{{basicInfo.minPrice}} </span>
                 <span> 原价￥{{basicInfo.originalPrice}}</span>
                <span class="right">{{basicInfo.stores}}件</span>
            </div>
        </div>
        <!-- tab切换 -->
        <tab @tabCut="tab" :aa="list"></tab>
        <!-- tab切换的内容 -->
        <div class="content" v-if="tabIndex==0" v-html="content"></div>
        <div class="content" v-if="tabIndex==1">商品评价</div>
        <!-- 动作栏 -->
       <van-action-bar>
        <van-action-bar-icon icon="service-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.push('/shopCar')" badge="5" />
        <van-action-bar-icon :icon="isStar?'star':'star-o'" :text="isStar?'已收藏':'未收藏'" @click="isStar =!isStar" color="#ff5000" />
        <van-action-bar-button type="warning" text="加入购物车" @click="$router.push('/shopCar')"/>
        <van-action-bar-button type="danger" text="立即购买" @click="show = true" />
        </van-action-bar>
        <!-- ActionSheet 动作面板 -->
        <van-action-sheet v-model:show="show">
                <div class="content-goods">
                    <!-- 基本信息 -->
                    <div class="goods-info">
                         <img :src="basicInfo.pic" alt=""> 
                         <section>
                            <p>{{basicInfo.name}}</p>
                            <p>
                                <span class="red">￥{{price?price:basicInfo.minPrice}}</span>
                                 <span> 库存{{stores?stores:basicInfo.stores}}</span>
                            </p>
                            
                         </section>
                    </div>
                    <!-- 规格尺寸 -->
                    <div class="rules-type">
                        <ul>
                            <!-- <li v-for="item,index in properties" :key="index">
                                <p>{{item.name}} -{{index}}</p>
                                <span v-for="(ele,i) in item.childsCurGoods" :key="ele.id" @click="getTics(item,ele,index)" :class="{active:checkId[index]==`${item.id}:${ele.id}`}">{{ele.name}}</span>
                            </li> -->
                             <li v-for="item,index in properties" :key="index">
                                <p>{{item.name}} -{{index}}</p>
                                <span v-for="(ele,i) in item.childsCurGoods" :key="ele.id" @click="getTics(item,ele,index)" :class="{active:checkId.some(it=>it==`${item.id}:${ele.id}`)}">{{ele.name}}</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 数量 -->
                    <div class="goods-num">
                        <p>商品数量</p>
                        <van-stepper v-model="carNum" />
                    </div>
                    <!-- 按钮 -->
                    <van-button color="#b7282e" block @click="addCart">加入购物车</van-button>
                </div>
        </van-action-sheet>
    </div>
</template>
<script>
import {useRoute,useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {getGoodsDetail,getTicsApi} from '@/utils/second.js'
import {reactive,toRefs} from 'vue'
import back from '../../components/back'
import tab from '../../components/tab'
import { Notify } from 'vant';
export default {
    setup(props) {
        const data = reactive({
           basicInfo:{},//存放基本信息
           pics:[],//存放商品展示图片
           content:'',//存放商品的图文介绍
           properties:[],//存放商品规格尺寸
           tabIndex:0,//用来保存子传父的下标
           list:[1,2,3,4],
           isStar:false,//false表示没有收藏  
           show:false,//动作面板的初始状态  
           carNum:1,//默认选中的数量
           checkId:[],//保存规格的id
           price:'',//保存后端返回的价格
           stores:'',//保存后端返回的库存
           token:localStorage.getItem('token'),
           ticName:[],//存放规格的名字
        })
        const {commit} = useStore()
        const route = useRoute()
        const {push} = useRouter()
        console.log(route);//route  路由的所有信息
        // const id = route.params.id //vue-router4.0以上版本获取不到params传参
        // const id = route.query.id
        // 商品的id
        const id = route.params.id
        // let form = new FormData()
        
        // form.append('id',id) //第一个参数是属性名，第二个参数是属性值
        // console.log(form);

        // 获取详情的请求
        getGoodsDetail({id}).then(res=>{
           console.log(res);
           data.basicInfo = res.data.basicInfo
           data.pics = res.data.pics2
           data.content = res.data.content
           data.properties = res.data.properties
        })
        // 子组件通过emit触发的自定义事件上的方法
        const tab = (val)=>{
            console.log(val);
            data.tabIndex = val

        }
        // 选择规格的方法
        const getTics=(item,ele,index)=>{
                // data.checkId = ele.id
                // data.checkId[index] = ele.id
               
                data.checkId[index] = `${item.id}:${ele.id}`
                 console.log(data.checkId);
                 data.ticName[index] = `${item.name}:${ele.name}`
                // 选择的规格尺寸信息：如：4:15,2:10,1:4 。多个规格请用英文的逗号分割，4:15 中的 4 获取代表颜色，15 或许代表 土豪金
                // 4颜色 15胭脂粉
                // data.checkId是数组  把数组转换为字符串
             getTicsApi({goodsId:id,propertyChildIds:data.checkId.join(',')}).then(res=>{
                console.log(res)
                if(res.code == 0){
                    data.price= res.data.price
                    data.stores = res.data.stores

                }else{
                  Notify({ type: 'danger', message:res.msg });
                }

             })   

        }
        // 加入购物车
        const addCart=()=>{
            // 判断有没有登录
            if(!data.token){
                push('/login')
                return
            }
            // 判断有没有选择规格
            if(data.checkId.length == data.properties.length){
                // 加入购物车
                // 组合一个对象
                let obj = {
                    img:data.basicInfo.pic,//图片
                    name:data.basicInfo.name,//名字
                    price:data.basicInfo.minPrice,//价格
                    carNum:data.carNum,//数量
                    status:false,//选中的状态
                    ticName:data.ticName.join(','),//规格名字
                    goodsId:id,//商品id
                    order:false,//提交订单的状态，默认没有提交订单的为false
                    checkId:data.checkId

                }
                commit('addCart',obj)
                // 关闭弹窗
                data.show = false

            }else{
                // 提示选择规格
                Notify({ type: 'danger', message:'请选择规格'});

            }
        }
        
        return {...toRefs(data),tab,getTics,addCart} //在模版里使用的东西，必须return ，如果不在模版里使用 不用return 

    },
    components:{
        back,
        tab
    }
}
</script>
<style lang="scss" scoped>
.detail{
    background: #f5f5f5;
}
.my-swipe{
    img{
        width:100%;
        height: 375px;
    }
}
.basicInfo{
    padding: 10px 16px;
    background: #fff;
    h4{
        font-size: 16px;

    }
    p{
        font-size: 12px;
        color: #999;
         margin-top: 10px;
    }
    div{
        margin-top: 10px;
        font-size: 12px;
        color: #999;
        span{
             font-size: 12px;
        }
        .red{
            color:#c00;
        }
        .right{
            float:right;
        }

    }
}
// 切记两个冒号
::v-deep .content{
    background: #fff;
    padding: 10px 16px;
    ul{
        li{
            line-height: 30px!important;
        }
    }
    p{
    img{
        width:100%!important;
        height: 94px!important;
    }
    }

   
}
.content-goods{
    padding: 10px;
  .goods-info{
      display: flex;
      padding-bottom: 10px;
       img{
        width: 62px;
        height: 62px;
        margin-right: 10px;
       }
       section{
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         p{
            font-size: 12px;
         }

       }
   }
}
.rules-type{
    border-top: 1px solid #eee;
    padding-bottom: 10px;
    ul{
        li{
            p{
                font-size: 14px;
                margin-top: 10px;
            }
            span{
                display: inline-block;
                padding: 5px 14px;
                color:#333;
                border: 1px solid #ccc;
                border-radius: 4px;
                font-size: 12px;
                margin-right: 10px;
                 margin-top: 10px;
                
            }
            .active{
                border-color:#c00;

            }

        }
    }
}
.goods-num{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eee;
    padding: 10px 0;
    p{
        font-size: 12px;
    }
}
</style>
